import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Layout, Menu, Breadcrumb, Carousel, Row, Col, Icon, Button, Divider, Tabs, List, Typography} from 'antd';
// import Slider from '@/components/Slider'
// import ActivitySlider from '@/components/ActivitySlider'
// import BigTitle from '@/components/BigTitle'
// import AboutUS from '@/components/AboutUS'
// import { BIAOTI, GYWM } from '../../constants'
import styles from './index.less';
// import router from 'umi/router';
// import Ellipsis from '@/components/Ellipsis';

const TabPane = Tabs.TabPane;

@connect(({ chart, loading }) => ({
  // chart,
  // loading: loading.effects['chart/fetch'],
}))
class Question extends Component {
  state = {
  };

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  callback = (key) =>  {
    console.log(key);
  }

  group =(array, subGroupLength)=>{
    let index = 0;
    let newArray = [];
    while(index < array.length) {
      newArray.push(array.slice(index, index += subGroupLength));
    }
    return newArray;
  }

  problemClick=(id)=>{
    // router.push(`/informationDetail?id=${id}&key=1`)
    window.open(`http://home.himedu.cn/informationDetail?id=${id}&key=1`, '_blank')
  }

  onZixunClick = () => {
    // window.open('http://plt.zoosnet.net/LR/Chatpre.aspx?id=PLT70547676&lng=cn', '_blank')
    openJesongChatByGroup(13072,25026);return false;
    // window.open('https://tb.53kf.com/code/client/e87c220968f7fcbffe4a0165dd3e04c67/1', '_blank')
  }

  render() {
    const {problemList } = this.props;
    const data = this.group(problemList, 3);
    // console.log('data-dj: ', data);
    return (
      <Row>
        <Col span={24}>
          <Row type='flex' justify='center'>
            {data.map((tabs, index1) => (
              <Col span={6} key={index1}>
                <div style={{cursor: 'pointer', textAlign: 'center'}} onClick={this.onZixunClick}>
                  <img style={{width: 150, height: 55}} src={'https://hua-jun-guan-wang.oss-cn-hangzhou.aliyuncs.com/%E9%A6%96%E9%A1%B5/dianjizixun.png'} />
                </div>
                <Tabs className={styles.customTabs} key={index1} defaultActiveKey="0" onChange={this.callback}>
                  {tabs.map((tab, index2) => (
                    <TabPane tab={<span style={{color: '#333333'}}>{tab.typeStr}</span>} key={index2}>
                      <List
                          itemLayout="horizontal"
                          dataSource={tab.list.filter((item, index) => index < 3)}
                          renderItem={item => (
                              <List.Item
                              onClick={() => this.problemClick(item.id)}>
                                  <List.Item.Meta
                                    // description={<span style={{cursor: 'pointer'}}><Ellipsis tooltip lines={1}>{localStorage.getItem('umi_locale') == 'zh-CN'?item.problem:item.problemEN}</Ellipsis></span>}
                                    description={<span style={{cursor: 'pointer'}}>{item.problem.length > 22 ? item.problem.substr(0, 22) + '...' : item.problem}</span>}
                                  />
                              </List.Item>
                          )}
                      />
                    </TabPane>
                  ))}
                </Tabs>
              </Col>
            ))}
          </Row>
        </Col>
      </Row>
    );
  }
}

export default Question;
